<template>
	<view class="container">
		<view class="avatar">
			<image src="/static/images/avatar.png"></image>
		</view>

		<view class="form">
			<uv-form labelPosition="left" labelWidth="80" labelAlign="right" :model="business" :rules="rules" ref="FormRef">
				<!-- 表单元素 -->
				<uv-form-item label="手机号码" prop="mobile" borderBottom>
					<uv-input v-model="business.mobile" border="none" placeholder="请输入手机号码"></uv-input>
				</uv-form-item>

				<uv-form-item label="密码" prop="password" borderBottom>
					<uv-input type="password" v-model="business.password" border="none" placeholder="请输入密码"></uv-input>
				</uv-form-item>

				<view style="margin-top:25px">
					<uv-button type="warning" @click="OnSubmit">登录注册</uv-button>
				</view>

				<view class="btn" @click="ToHome">返回首页</view>
			</uv-form>
		</view>
	</view>

    <!-- 消息提示 -->
	<uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = reactive({
    mobile:'',
    password:''
});

// 表单对象实例
const FormRef = ref(null);
const NoticeRef = ref(null);

// 表单验证规则
const rules = ref({
    mobile: [
        {
            type: 'string',
            required: true, //要求必填
            message: '手机号码必填',
            trigger: ['change', 'blur'], //触发的事件动作
        },
        {
            //自定义验证函数
            validator: (rule, value, callback) => uni.$uv.test.mobile(value),
            message: '手机号码格式有误，请重新填写',
            trigger: ['change', 'blur'], //触发的事件动作
        },
    ],
    password: [
        {
            type: 'string',
            required: true,
            message: '请填写密码',
            trigger: ['blur', 'change']
        }
    ]
});

const ToHome = () =>
{
    proxy.$uv.route({
        type:'switchTab',
        url:'/pages/validate/validate'
    });
}

const OnSubmit = () =>
{
    FormRef.value.validate().then(async () =>
    {
        // H5端和App端登录
        const result = await uni.$uv.http.post('/business/login',business);
    
        if(result.code === 1)
        {
            NoticeRef.value.show({
                type:'success',
                message:result.msg,
                complete:() =>
                {
                    // 存储登录信息
                    uni.setStorageSync('business',result.data);

                    proxy.$business.value = result.data;

                    uni.$uv.route({
                        type:'redirectTo',
                        url:result.url
                    });
                }
            })
        }else{
            NoticeRef.value.show({
                type:'error',
                message:result.msg
            });
        }
    }).catch(() => {});
}
</script>

<style lang="scss">
@import '@/static/styles/theme.scss';

page {
    background-color: $bg-color;
}

.container {
    @extend .page-container;
    
    .avatar {
        text-align: center;
        background: linear-gradient(135deg, $card-bg 0%, lighten($primary-color, 35%) 100%);
        padding: 40rpx 0;
        margin-bottom: 40rpx;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

        image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    }

    .form {
        @extend .card;
        margin: 0 30rpx;
        padding: 40rpx;

        :deep(.uv-form-item) {
            margin-bottom: 30rpx;
        }

        :deep(.uv-input) {
            background-color: rgba($primary-color, 0.05);
            border-radius: 12px;
            padding: 20rpx;
        }

        :deep(.uv-button) {
            @extend .btn;
            @extend .btn-warning;
            margin-top: 40rpx;
        }
    }

    .btn {
        margin-top: 30rpx;
        text-align: center;
        color: $text-light;
        font-size: 28rpx;
    }
}
</style>